<!-- Custom tabs (Charts with tabs)-->
<div class="nav-tabs-custom">
    <!-- Tabs within a box -->
    <ul class="nav nav-tabs pull-right">
        <li class="pull-left header"><i class="fa fa-inbox"></i> General</li>
    </ul>
    <div class="tab-content no-padding">
        <!-- Morris chart - Sales -->
        <div class="chart tab-pane active" id="general-chart" style="position: relative; height: 300px;"></div>
    </div>
</div><!-- /.nav-tabs-custom -->

<div class="nav-tabs-custom">
    <!-- Tabs within a box -->
    <ul class="nav nav-tabs pull-right">
        <li class="pull-left header"><i class="fa fa-inbox"></i> User</li>
    </ul>
    <div class="tab-content no-padding">
        <!-- Morris chart - Sales -->
        <div class="chart tab-pane active" id="user-chart" style="position: relative; height: 300px;"></div>
    </div>
</div><!-- /.nav-tabs-custom -->

<div class="nav-tabs-custom">
    <!-- Tabs within a box -->
    <ul class="nav nav-tabs pull-right">
        <li class="pull-left header"><i class="fa fa-inbox"></i> Play</li>
    </ul>
    <div class="tab-content no-padding">
        <!-- Morris chart - Sales -->
        <div class="chart tab-pane active" id="play-chart" style="position: relative; height: 300px;"></div>
    </div>
</div><!-- /.nav-tabs-custom -->


<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<!-- Morris chart -->
<link href="/assets/adminlte/css/morris/morris.css" rel="stylesheet" type="text/css" />
<!-- Morris.js charts -->
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="/assets/adminlte/js/plugins/morris/morris.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function() {
        // Create a Bar Chart with Morris
        var general_chart = new Morris.Line({
            element: 'general-chart',
            resize: true,
            data: [
                {date: '2014-12-01', user: 2014, play: 2015},
            ],
            xkey: 'date',
            ykeys: ['user', 'play'],
            labels: ['User','Play'],
            lineColors: ['#a0d0e0', '#3c8dbc'],
            hideHover: 'auto'
        });

        var user_chart = new Morris.Line({
            element: 'user-chart',
            resize: true,
            data: [
                {date: '2014-12-01', user: 2014},
            ],
            xkey: 'date',
            ykeys: [ 'user'],
            labels: ['User'],
            lineColors: ['#a0d0e0', '#3c8dbc'],
            hideHover: 'auto'
        });

        var play_chart = new Morris.Line({
            element: 'play-chart',
            resize: true,
            data: [
                {date: '2014-12-01', play: 2015},
            ],
            xkey: 'date',
            ykeys: [ 'play'],
            labels: ['Play'],
            lineColors: ['#3c8dbc'],
            hideHover: 'auto'
        });

        // Fire off an AJAX request to load the data
        $.ajax({
            type: "GET",
            dataType: 'json',
            url: "/admin/report/weeklychartdata", // This is the URL to the API
            data: { days: 7 } // Passing a parameter to the API to specify number of days
        })
            .done(function( data ) {
                // When the response to the AJAX request comes back render the chart with new data
                general_chart.setData(data);
                user_chart.setData(data);
                play_chart.setData(data);
            })
            .fail(function() {
                // If there is no communication between the server, show an error
                alert( "error occured" );
            });
    });


</script>